<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MSAC Home</title>
    <link rel="icon" href="/assets/images/icon.png">

    <!-- 引入shoelace开始 -->
    <link rel="stylesheet" href="/lib/node_modules/@shoelace-style/shoelace/dist/themes/light.css" />
    <script type="module" src="/lib/node_modules/@shoelace-style/shoelace/cdn/shoelace.js"></script>
    <!-- 引入shoelace结束 -->
    <!-- 引入侧边栏开始 -->
    <script src="/components/sidebar/menu/index.js"></script>
    <!-- 引入侧边栏结束 -->
    <link rel="stylesheet" href="/assets/css/tailwind.css" />
    <link rel="stylesheet" href="/pages/home/index.css" />
    <script src="/utils/locale.js"></script>
    <script src="/config/storage/local.js"></script>
</head>
<template id="template-home">
    <div class="div-content">
        <div class="div-left" id="div-left">
            <div class="div-left-top">
                <div class="div-home-title">
                    <div class="title">{{i18n.APPAbbreviation}}</div>
                    <sl-tooltip content="contract">
                        <sl-icon class="icon-contract" name="grip-vertical" id="btn-contract"></sl-icon>
                    </sl-tooltip>
                    <sl-tooltip content="expand">
                        <img src="/assets/images/icon.png" alt="MSAC" class="icon-expand" id="btn-expand">
                    </sl-tooltip>
                </div>
                <!-- <div class="div-home-title">MSAC</div> -->
                <div class="div-appliction-title">
                    <span class="span-application-title">应用</span>
                    <span class="span-application-more">
                        <sl-tooltip content="more">
                            <sl-icon name="three-dots"></sl-icon>
                        </sl-tooltip>
                    </span>
                </div>
            </div>
            <div class="div-left-bottom" id="menu-content">
                <wcs-sidebar-menu id="menu"></wcs-sidebar-menu>
            </div>
        </div>
        <div class="div-right">
            <div class="div-right-top">
                <div class="box-top">
                </div>
                <div class="box-bottom"></div>
            </div>
            <div class="div-right-bottom">
                <div class="box-full"></div>
            </div>
        </div>
    </div>
</template>

<body id="content-home">

</body>
<script src="/pages/home/index.js"></script>

</html>